<template>
	<view class="mslist">
		<view class="item" v-for="(item, i) in list" :key="i">
			<view class="lbox">
				<!-- <image :src="item.img" mode="aspectFill"></image> -->
				<u--image :src="item.img" width="144rpx" radius="6rpx" height="144rpx"></u--image>
			</view>
			<view class="rbox">
				<view class="row-1">
					<text class="line-2">{{ item.title }}</text>
					<view class="jdtbox">
						<u-line-progress
							height="16rpx"
							color="#000000"
							fontSize="12rpx"
							:percentage="setJd(item.kucun, item.orders)"
							inactiveColor="#fadbdb"
							activeColor="#E54E4E"
						></u-line-progress>
					</view>
				</view>
				<view class="row-2">
					<view class="lbox">
						<text>{{ item.price_sale }}</text>
						<text>{{ item.price_market }}</text>
					</view>
					<view class="rbox">
						<button @click="qiangGou(item)">立即抢购</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'mslist',
	props: {
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		}
	},
	computed: {
		setJd() {
			return (a, b) => {
				let kucun = parseFloat(a),
					orders = parseFloat(b);
				let result = orders / kucun * 100;
				return result.toFixed(0);
			};
		}
	},
	data() {
		return {};
	}
	,
	methods:{
		qiangGou(item){
			// if(item.kucun == 0){
			// 	uni.showToast({
			// 		title:'很抱歉，此商品库存不足下次再来吧',
			// 		icon:'none'
			// 	})
			// 	return
			// }
			this.toNav(`goods/goodsDetail?id=${item.inventoryId}`);
			
		}
	}
};
</script>

<style lang="less" scoped>
.mslist {
	.item + .item {
		margin-top: 16rpx;
	}
	.item {
		display: flex;

		width: 686rpx;
		height: 252rpx;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.lbox {
			image {
				width: 144rpx;
				height: 144rpx;
				background: #f5f5f5;
			}
		}
		& > .rbox {
			display: flex;
			flex-direction: column;
			flex: 1;
			.row-1 {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 144rpx;

				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #141414;
				}
				.jdtbox {
					width: 220rpx;
					height: 16rpx;
				}
			}
			.row-2 {
				flex: 1;
				.flex-between();
				margin-left: 24rpx;
				.lbox {
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #e54e4e;
						&:before {
							content: '￥';
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #e54e4e;
						}
					}
					text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						.j-sc();
						margin-left: 10rpx;
						&:before {
							content: '￥';
						}
					}
				}
				.rbox {
					button {
						width: 140rpx;
						height: 48rpx;
						background: #e54e4e;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						white-space: nowrap;
						border-radius: 24rpx;
						margin: 0;
					}
				}
			}
		}
	}
}
</style>
